<template>  
    <div class="message-list">  
      <h2>消息列表</h2>  
      <ul>  
        <li v-for="message in messages" :key="message.id" @click="showMessageDetail(message)">  
          <strong>{{ message.sender }}</strong>: {{ message.content }}  
        </li>  
      </ul>  
    </div>  
  </template>  
    
  <script>  
  import MessageDetail from '../components/MessageDetail.vue';
  export default {  
    data() {  
      return {  
        messages: [  
          { id: 1, sender: '用户A', content: '你好，请问这个商品还在吗？', timestamp: '2023-10-01 10:00' },  
          { id: 2, sender: '用户B', content: '我想了解一下这个商品的详情。', timestamp: '2023-10-02 12:00' },  
          // 更多消息...  
        ],  
      };  
    }, 
    components:{
        MessageDetail
    } ,
    methods: {  
      showMessageDetail(message) {  
        this.$emit('show-detail', message);  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
  .message-list {  
    width: 80%;  
    margin: 0 auto;  
  }  
    
  .message-list ul {  
    list-style-type: none;  
    padding: 0;  
  }  
    
  .message-list li {  
    border-bottom: 1px solid #ccc;  
    padding: 10px 0;  
    cursor: pointer;  
  }  
    
  .message-list li:hover {  
    background-color: #f0f0f0;  
  }  
  </style>